<template>
<pullRefresh @refresh="toRefresh">
<!-- 幸运飞艇 投注页面 -->
<div id="xyft">
	<ul class="mui-table-view topFixedList">
		<!-- 顶部开奖倒计时 -->
		<li id="col-title" class="mui-table-view-cell">
			<div class="name"><b>幸运飞艇</b><span>官方</span></div>
			<div class="time">
				<span class="phase">距{{nextISSUE}}期</span>
				<span class="countdown">开奖 <i>{{hms}}</i></span>
			</div>
			<div class="bonus">玩法奖金<br>{{incomePer}}</div>
		</li>
		<!-- 上期开奖号码 -->
		<li id="lottery" class="mui-table-view-cell" v-if="curData">第<i>{{curData.issue}}</i>期开奖号码
			<span v-for="Num in curWinNums" :style="'background:'+colorList[Num-1]">{{Num>9?Num:"0"+Num}}</span>
		</li>
	</ul>
	<!-- 彩票选号板块 -->
	<div id="selectbox">
		<ul v-for="(item,index) in selectData" class="mui-table-view selectbox">
			<li class="mui-table-view-cell fastslect">
				<span>{{item.name}}</span>
				<button v-for="(txt,n) in fsTxts" :data-index="index" type="button" @tap="fastselect" :class="item.curFastBtn==n?'mui-btn mui-btn-danger':'mui-btn'">{{txt}}</button>
			</li>
			<li class="mui-table-view-cell numbers">
				<button v-for="mum in numbers" type="button" :data-index="index" :data-num="mum" @tap="select" :class="item.selected.includes(mum)?'mui-btn mui-btn-danger':'mui-btn'">{{mum>9?mum:"0"+mum}}</button>
			</li>
		</ul>
	</div>
	<div class="bottomFixedList">
		<div class="multiple mui-table-view">
			<!-- 数字输入 -->
			<div class="left numbox">
				<button class="mui-btn numbox-btn-minus" type="button" @tap="setMultiple(-1)">－</button>
				<input class="numbox-input" type="number" v-model="multiple" />
				<button class="mui-btn numbox-btn-plus" type="button" @tap="setMultiple(1)">＋</button>
			</div>
			<span style="position:absolute;line-height:9vw;left:calc(40% + 8px);">倍</span>
			<div class="right">
				<button type="button" :class="multiple==5?'mui-btn mui-btn-danger':'mui-btn'" @tap="setMultiple(5)">5倍</button>
				<button type="button" :class="multiple==10?'mui-btn mui-btn-danger':'mui-btn'" @tap="setMultiple(10)">10倍</button>
				<button type="button" :class="multiple==20?'mui-btn mui-btn-danger':'mui-btn'" @tap="setMultiple(20)">20倍</button>
			</div>
		</div>
		<div class="moneyli mui-table-view">
			<span>{{pieces}} 注</span>
			<span>共 {{total}} 元</span>
		</div>
		<div class="submit">
			<div class="left">
			</div>
			<div class="right">
				<button type="button" @tap="buyTap" :style="total>0?'':'opacity:.2'" class="mui-btn mui-btn-danger">投注</button>
			</div>
		</div>
	</div>
</div>
</pullRefresh>
</template>

<script>
import pullRefresh from "@/components/pullRefresh"
import {s_to_hms} from "@/utils/public.js"
import {basePrice,findAllLottery,countDown,getLotteryCode} from "@/api/begin"
import {buyApi} from "@/api/my"
export default {
  name: 'xyft',
  components:{
  	  pullRefresh
  },
  data(){
	  return{
		selectData:[
			{name:'冠',mate:'one',curFastBtn:-1,selected:[]},
			{name:'亚',mate:'two',curFastBtn:-1,selected:[]},
			{name:'季',mate:'three',curFastBtn:-1,selected:[]},
			{name:'肆',mate:'four',curFastBtn:-1,selected:[]},
			{name:'伍',mate:'five',curFastBtn:-1,selected:[]},
			{name:'陆',mate:'six',curFastBtn:-1,selected:[]},
			{name:'柒',mate:'seven',curFastBtn:-1,selected:[]},
			{name:'捌',mate:'eight',curFastBtn:-1,selected:[]},
			{name:'玖',mate:'nine',curFastBtn:-1,selected:[]},
			{name:'拾',mate:'ten',curFastBtn:-1,selected:[]},
		],
		fsTxts:["大","小","单","双","清"],
		numbers:["1","2","3","4","5","6","7","8","9","10"],
		colorList:["#d19c00","#1177cb","#e2558a","#db6300","#119e8d","#4a01e8","#9C27B0","#e21800","#82110e","#05a300"],
		multiple:"",		//倍数
		unitPrice:1,	//单价（每注价格）
		countDown:0,		//倒计时秒数
		interval:null,		//倒计时定时器
		TimeOut:null,		//延时请求计时器
		curData:null,		//幸运飞艇当前数据
		curWinNums:[],		//当前中奖号码
		nextISSUE:null,		//下一期期号
		incomePer:null,	//玩法奖金
		timeoutFlag:null	,//请求下期彩票超时记录
		getLotteryCodeFlagNum:1		,//请求下一期彩票次数记录，超过50次刷新
		intervalState:true
	  }
  },
  computed:{
  	hms(){
  		return this.countDown==0?"等待开奖":s_to_hms(this.countDown)
  	},
  	pieces(){	//注数
  		let pieces=0;
  		this.selectData.forEach(item=>{pieces+=item.selected.length})
  		return pieces;
  	},
  	total(){	//总价
  		return this.pieces * this.unitPrice * this.multiple;
  	}
  	
  },
  watch:{
	multiple(num){
		if(num=='' || num<1){
			this.multiple = 1
		}
	},
  	countDown(val){	//幸运飞艇结束请求下一期
  		if(val==0){	//延迟30秒再请求
  			this.TimeOut = setTimeout(()=>{
  				this.timeoutFlag = Date.now()	//记录时间 超时刷新页面
  				this.newLottery()
  				clearTimeout(this.TimeOut)
  			},32500)
  		}
  	},
  	curData(data){
  		//当前中奖号码
  		this.curWinNums = [];
  		["one","two","three","four","five","six","seven","eight","nine","ten"].forEach(item=>{this.curWinNums.push(data[item])})
  	}
  },
  mounted(){
  	this.mountedInit()
  },
  methods:{
	mountedInit(calback){
		mui.showLoading("等待中..", "div");
		//请求每注基数
		basePrice().then(res=>{
			this.unitPrice = parseFloat(res.baseMoney)	//单价
			this.incomePer = res.incomePer		//玩法奖金
			return countDown()
		}).then(res=>{	//倒计时数据
			this.countDown = res.XYFT
			this.setCountDown()
			return findAllLottery("XYFT")
		}).then(res=>{	//幸运飞艇彩票数据
			this.curData = res[0].lottery
			this.nextISSUE = res[0].nextIssue
			mui.hideLoading()
			calback && calback()
		})
	},
  	setCountDown(){	//倒计时计时器
  		let interval = setInterval(()=>{
			if(!this.intervalState){
				 clearInterval(this.interval);
				 clearInterval(interval)
			}
  			this.countDown--
  			if(this.countDown<=0){
  				interval = null;
  				clearInterval(this.interval);
  			}
  		 },1000)
  		 this.interval = interval;
  	},
  	newLottery(){	//递归请求下一期幸运飞艇
  		//判断是否超时，超时刷新页面
  		if(Date.now() - this.timeoutFlag>60000){
  			this.$router.go(0)
  			return;
  		}
  		//下一期期号
  		let ISSUE = this.nextISSUE
  		getLotteryCode(ISSUE,"XYFT").then(res=>{
  			if(res.status){
  				this.curData = res.current;
  				this.nextISSUE = res.nextISSUE;
  				//请求倒计时
  				countDown().then(res=>{
  					this.countDown = res.XYFT
					clearInterval(this.interval)
  					this.setCountDown()
  				})
  			}else{
				this.getLotteryCodeFlagNum++
				
				if(this.getLotteryCodeFlagNum>this.nextLotteryRqTh){
					mui.toast("网络延迟,即将刷新系统")
					//刷新页面
					this.toRefresh()
					return;
				}
  				let sleep = null;
  								
  				if(!this.intervalState){
  					clearTimeout(sleep);
  					return;
  				}
  				
  				sleep = setTimeout(()=>{
  					this.newLottery()
  					clearTimeout(sleep)
  				},2000)
  			}
  		})
  	},
  	fastselect(e){
  		let curBtnTxt = e.target.innerText,	//点击的按钮
  			selectIndex = e.target.dataset.index;	//序号
  			
  		//点选事件
  		let curFastBtn = this.selectData[selectIndex].curFastBtn,
  			selectBtnIndex = this.fsTxts.indexOf(curBtnTxt);
  			
  		if(curFastBtn==selectBtnIndex){
  			this.selectData[selectIndex].curFastBtn = -1;
  			this.selectData[selectIndex].selected = [];
  			return;
  		}
  		
  		this.selectData[selectIndex].curFastBtn = selectBtnIndex;
  		
  		switch (curBtnTxt){
  			case "大":
  				this.selectData[selectIndex].selected = this.numbers.slice(5,10)
  				break;
  			case "小":
  				this.selectData[selectIndex].selected = this.numbers.slice(0,5)
  				break;
  			case "单":
  				this.selectData[selectIndex].selected = this.numbers.filter((_,i)=>i%2==0)
  				break;
  			case "双":
  				this.selectData[selectIndex].selected = this.numbers.filter((_,i)=>i%2==1)
  				break;
  			default:
  				this.selectData[selectIndex].selected = []
  				let Timer = setTimeout(()=>{
  					this.selectData[selectIndex].curFastBtn = -1;
  					clearTimeout(Timer)
  				},200)
  				break;
  		}
  	},
  	select(e){
  		let curSelected = e.target.dataset.num,		//点击的选项
  			selectIndex = e.target.dataset.index;	//序号
  		
  		let indexof = this.selectData[selectIndex].selected.indexOf(curSelected);
  		if(indexof!=-1){
  			this.selectData[selectIndex].selected.splice(indexof,1)
  		}else{
  			this.selectData[selectIndex].selected.push(curSelected)
  		}
  	},
  	setMultiple(e){	//倍数调整
  		if(e>1){
  			this.multiple = e==this.multiple?1:e
  			return;
  		}
  		this.multiple = this.multiple*1+e;
  		if(this.multiple==0){
  			this.multiple = 1
  		}
  	},
  	buyTap(){
  		if(this.total==0){
  			return;
  		}
		let data = {
			times:this.multiple,
			ISSUE:this.nextISSUE,
			money:this.total,
			type:"XYFT"
		};
		//循环出下注的号码
		this.selectData.forEach(item=>{
			data[item.mate] = item.selected.join(",")
		});
		
		let _this = this;
		
		mui.confirm('您确定下注吗？','投注确认',["取消","确认"],function(e){
			if(e.index == 1){
				mui.showLoading("等待中..", "div");
			   //下注请求
			   buyApi(data).then(res=>{
				mui.hideLoading()
				if(res.message){
					mui.toast(res.message)
					return;
				}
			   	if(res==200){
			   		mui.alert("投注成功",'提示');
					this.toRefresh()
			   	}
			   })
			}
		});
  	},
	toRefresh(callback){
			//关闭定时器以防出错
			this.intervalState = false;
			clearInterval(this.interval)
			//这里进行重新加载数据操作
			this.mountedInit(()=>{
				this.intervalState = true;
				callback && callback()
			})
		}
	},
	destroyed(){
		  //清除计时器
		  this.intervalState = false;
		  clearInterval(this.interval)
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mui-table-view-cell.mui-active{background-color:#fff}
.topFixedList{position:fixed;width:100%;top:44px;left:0;z-index:10}
#col-title{position:relative;width:100%;padding:0;display:flex;align-items:center;height:10vw;background:#faebd7;color:#632000}
#col-title:after,.mui-table-view.topFixedList:before{background-color:#a53906;left:0}
#col-title .name{font-size:3.5vw;padding:0 2vw;display:flex;align-items:center;justify-content:space-between;width:30%;position:relative}
#col-title .name>span{background:#dd524d;border-radius:5px;color:#fff;padding:0 1.5vw;font-size:3vw;position:absolute;right:2vw;line-height:1.8;transform:scale(.9)}
#col-title .time{font-size:3vw;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.3;background:#fff;height:100%;padding:0 2.5vw;width:40%}
#col-title .time i{font-size:4.2vw;font-style:normal;color:#dd524d;line-height:1;transform:translateY(.2vw);display:inline-block}
#col-title .bonus{font-size:3vw;text-align:center;line-height:1.3;padding:0 2vw;width:30%}
#lottery{height:9vw;line-height:9vw;position:relative;width:100%;background:#fff;font-size:3.4vw;padding:0 2vw;overflow-wrap:break-word;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}
#lottery::-webkit-scrollbar{display:none}
#lottery>i{font-style:normal;color:#dd524d}
#lottery>span{font-style:normal;color:#fff;font-size:3vw;width:4.5vw;height:4.5vw;line-height:4.5vw;text-align:center;margin:0 .8vw;display:inline-block;transform:scale(1.2)}
#selectbox{margin:calc(19vw + 10px) 0 calc(38vw + 10px) 0;}
.selectbox{position:relative;background:#fff;margin-bottom:10px;}
.selectbox .mui-table-view-cell{padding:2vw}
.mui-table-view-cell.fastslect:after{left:2vw;right:2vw}
.selectbox .numbers{display:flex;flex-wrap:wrap}
.selectbox .fastslect{display:flex;align-items:center;justify-content:space-around;font-size:4.5vw}
.selectbox .fastslect>.mui-btn{background:#999;color:#fff;border:0}
.mui-table-view-cell>.mui-btn{position:relative;-webkit-transform:translateY(0);transform:translateY(0);top:0;right:0;line-height:1!important}
.mui-table-view-cell.fastslect>.mui-btn{padding:2vw;font-size:4vw}
.mui-table-view-cell.numbers>.mui-btn{padding:0;width:12vw;height:12vw;color:#666;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #999;border-radius:50%;margin:2vw 3.6vw;font-size:5.4vw}
.mui-btn.mui-btn-danger{color:#fff!important;border-color:#dd524d!important;background:#dd524d!important}
.bottomFixedList{position:fixed;bottom:0;background:#fff}
.multiple{height:15vw;padding:0 2vw;display:flex;align-items:center;justify-content:space-between}
.multiple .left{width:40%;height:9vw}
.multiple .right{width:45%;display:flex;align-items:center;justify-content:space-between}
.multiple .right .mui-btn{height:9vw;border-color:#bbb;font-size:3.5vw;line-height:1;padding:0;width:13vw}
.moneyli{height:9vw;display:flex;align-items:center;justify-content:space-between;font-size:3.5vw;padding:0 2vw}
.submit{height:14vw;display:flex;align-items:center;justify-content:space-between;padding:0 2vw;background:#fff}
.submit .mui-btn{font-size:4vw;line-height:1}
.submit .left .mui-btn{padding:1.5vw;margin-right:1vw;border-color:#000}
.submit .right .mui-btn{padding:2vw 4vw}
</style>
